import React, { Component } from 'react'
import axios from 'axios'
import 'antd/dist/antd.css'
import { Carousel } from 'antd'
import Item from './Item'

class Home extends Component {

    state = {
        list: [],
        dh: ['网页', '图片', '新闻', '视频', '地图'],
        i: 0,
        ind: 1
    }

    componentDidMount() {
        axios.get('/api/list').then((res) => {
            this.setState({
                list: res.data
            })
        })
    }

    render() {
        let { list, dh, i, ind } = this.state
        return (
            <div className='Home'>
                <div className='top'>
                    <ul>
                        {
                            dh && dh.length ? dh.map((item, index) => {
                                return <li key={index}>{item}</li>
                            }) : <div>暂无数据</div>
                        }
                    </ul>
                    <input placeholder='输入并搜索' />
                </div>
                <div className='lbt'>
                    <Carousel>
                        <div>
                            <h3 style={contentStyle}>
                                {
                                    list && list.length ? list[i].children.map((item,index) => {
                                        return <Item key={index} item={item} />
                                    }) : <div>暂无数据</div>
                                }
                            </h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>
                            {
                                    list && list.length ? list[ind].children.map((item,index) => {
                                        return <Item key={index} item={item} />
                                    }) : <div>暂无数据</div>
                                }
                            </h3>
                        </div>
                    </Carousel>
                </div>
            </div>
        )
    }
}

const contentStyle = {
    height: '540px',
    color: '#fff',
    background: '#364d79',
    marginTop: '30px',
    display: 'flex',
    alignItems: 'center',
    flexWrap: 'wrap'
  }

export default Home